<template>
    <div class="pageMain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="订单详情" left-arrow @click-left="toBack" />
        </div>

        <div class="mainCon">
            <!-- 地址开始 -->
            <div class="address">

                <div class="address-infor">{{ order.userName }} {{ order.userTel }}</div>
                <div class="one-line address-content">{{ order.userAddr }}</div>
            </div>
            <!-- 地址结束 -->
            <div class="padding-box top12px">
                <!-- 订单状态开始 -->
                <div class="card">
                    <!-- 订单状态 -->
                    <div class="status-box">
                        <div>订单状态</div>
                        <div v-if="order.orderStatus == 0" class="status-text">未支付</div>
                        <div v-if="order.orderStatus == 1" class="status-text">未发货</div>
                        <div v-if="order.orderStatus == 2" class="status-text">待收货</div>
                        <div v-if="order.orderStatus == 3" class="status-text">已完成</div>
                        <div v-if="order.orderStatus == 4" class="status-text">已取消</div>
                    </div>
                    <!-- 商品信息 -->
                    <div v-for="(item, index) in order.orderList" :key="index" class="product"
                        @click="toDetail(item.productId)">
                        <img :src="alPath + 'zhenghui/format/' + item.formatImg" class="product-img">
                        <div class="widtn-control">
                            <div class="one-line product-name">{{ item.productName }}</div>
                            <div class="one-line product-spec">{{ item.formartName }}</div>
                        </div>
                        <div class="price-box">

                            <div class="price-money">￥<span class="big">{{ item.productPrice |
                getPriceFront }}</span>.{{ item.productPrice | getPriceEnd }}</div>
                            <div class="price-num">x{{ item.productNum }}</div>
                        </div>
                    </div>

                    <!-- 订单信息 -->
                    <div class="order-item-box">
                        <div class="order-item">
                            <div class="order-item-title">商品金额</div>
                            <div class="order-item-num">￥{{ order.realSum | toFixed2 }}</div>
                        </div>
                        <div class="order-item">
                            <div class="order-item-title">优惠金额</div>
                            <div class="order-item-num">￥{{ order.usedYh | toFixed2 }}</div>
                        </div>
                        <div class="order-item">
                            <div class="order-item-title">支付方式</div>
                            <div class="order-item-num">{{ order.payWay }}</div>
                        </div>
                        <div class="order-item">
                            <div class="order-item-title">运费</div>
                            <div class="order-item-num">￥0</div>
                        </div>
                    </div>
                </div>
                <!-- 订单状态结束 -->

                <!-- 总计开始 -->
                <div class="card margin-bottom-56">
                    <div class="order-item padding-top-0 padding-bottom-12">
                        <div class="order-item-title">{{ order.payWay == '储值金抵扣' ? '抵扣金额' : '实付金额' }} </div>
                        <div class="order-item-num">￥{{ (order.payWay == '储值金抵扣' ? order.usedStored : order.realMoney) |
                toFixed2 }}
                        </div>
                    </div>
                    <div class="order-item-box">
                        <div class="order-item">
                            <div class="order-item-title">订单编号</div>
                            <div class="order-item-num">{{ order.orderNumber }}</div>
                        </div>
                        <div class="order-item">
                            <div class="order-item-title">下单时间</div>
                            <div class="order-item-num">{{ order.orderDate }}</div>
                        </div>


                        <template v-if="order.payDate != null">
                            <div class="order-item">
                                <div class="order-item-title">支付时间</div>
                                <div class="order-item-num">{{ order.payDate }}</div>
                            </div>
                            <div class="order-item">
                                <div class="order-item-title">支付方式</div>
                                <div class="order-item-num">{{ order.payWay }}</div>
                            </div>
                        </template>

                        <!-- <div v-if="order.send_time != null" class="order-item">
                            <div class="order-item-title">发货时间</div>
                            <div class="order-item-num">{{ order.sendTime }}</div>
                        </div>
                        <div v-if="order.success_time != null" class="order-item">
                            <div class="order-item-title">完成时间</div>
                            <div class="order-item-num">{{ order.successTime }}</div>
                        </div> -->
                    </div>
                </div>
                <div class="card margin-bottom-56" v-if="order.orderStatus == 2">
                    <div class="order-item padding-top-0 padding-bottom-12">
                        <div class="order-item-title">物流信息</div>
                    </div>
                    <div class="order-item-box">
                        <div class="order-item">
                            <div class="order-item-title">物流公司</div>
                            <div class="order-item-num">{{ order.wuCompany }}</div>
                        </div>
                        <div class="order-item">
                            <div class="order-item-title">物流单号</div>
                            <div class="order-item-num">{{ order.wuOrder }}</div>
                        </div>
                    </div>
                </div>
                <!-- 总计结束 -->

                <!-- 底部 -->
                <div class="footer" v-if="order.orderStatus == 0 || order.orderStatus == 2">
                    <div v-if="order.orderStatus == 0" @click="cancelOrder(order.mainId)"
                        class="footer-btn default-btn">
                        取消订单</div>
                    <div v-if="order.orderStatus == 0" @click="payOrder()" class="footer-btn color-btn">去支付</div>
                    <!-- <div v-if="order.orderStatus == 2" @click="checkOrder(order.orderNum)"
                        class="footer-btn default-btn">
                        查看物流
                    </div> -->
                    <div v-if="order.orderStatus == 2" @click="confirmOrder(order.mainId)" class="footer-btn color-btn">
                        确认收货
                    </div>
                </div>
            </div>
        </div>


    </div>

</template>

<script>


import { dingdanxiangqing, updateOrder, pay, editOrderStatus } from '../../network/order'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            order_num: localStorage.order_num,
            order: '',
            order: [],
            mask: true, //遮罩
            downLoadFlag: false,
            wuliuAlert: false,
            wuliuCom: "",
            wuliuNum: "",
            orderStatus: localStorage.orderStatus,
            distributionRecord: '',
        }
    },
    mounted() {

    },
    methods: {

        toBack() {
            this.$router.go(-1)
        },
        getData: function () {
            this.order = JSON.parse(localStorage.order)
            console.log(this.order);
        },

        cancelOrder: function (id) {
            var that = this;
            this.$dialog.confirm({
                title: '提示',
                message: '是否取消该订单？',
            })
                .then(function () {
                    editOrderStatus({
                        mainId: id,
                        orderStatus: 4,
                    }).then(res => {
                        if (res.flag) {
                            that.$toast("取消成功");
                            that.order.orderStatus = 4
                        }
                    })
                })
                .catch(function () {
                });
        },
        confirmOrder: function (id) {
            var that = this;
            this.$dialog.confirm({
                title: '提示',
                message: '是否确认收货？',
            })
                .then(function () {
                    editOrderStatus({
                        mainId: id,
                        orderStatus: 3,
                    }).then(res => {
                        if (res.flag) {
                            that.$toast("确认成功");
                            that.order.orderStatus = 3
                        }
                    })
                })
                .catch(function () {
                });
        },
        checkOrder: function (order_num) {
            localStorage.order_num = order_num;
            // 查看物流信息
            mui.openWindow({
                url: 'Logistics_information.html',
            });
        },
        toDetail: function (product_id) {
            localStorage.product_id = product_id;
            this.$router.push('/detail')
        },
        payOrder: function () {
            var that = this;
            if (!(this.dateFormat(this.order.orderDate))) {
                console.log(this.order);
                // return
                var order_num = this.order.orderNum;
                var cash_used = this.order.crashUsed;
                var real_sum = (this.order.realSum).toFixed(2);
                var shopid = this.order.orderFlag == "7" ? 1 : this.order.shopId;
                var iszq = this.order.addressId;

                var disCash = 0, points = 0, parent_id = 0, fxTotal = 0, fxOldTotal = 0;

                if (this.distributionRecord != '') {
                    parent_id = this.distributionRecord.parentId
                    disCash = this.distributionRecord.commissionSum
                }


                pay({
                    userId: localStorage.userId,
                    shopId: localStorage.shopId,
                    orderNumber: this.order.orderNumber,
                    parentId: this.order.parentId || 0,
                    realMoney: this.order.realMoney,
                    rebate: 0,
                    flag: 0,
                    openId: 0,
                    ifDown: 0,
                }).then(res => {
                    if (res.flag) {
                        this.payHandle(res)
                    } else {
                        this.payError()
                    }
                })
            } else {
                editOrderStatus({
                    mainId: that.order.mainId,
                    orderStatus: 4,
                }).then(res => {
                    if (res.flag) {
                        this.$toast("已超过24小时未支付，系统已将该订单取消");
                        this.order.orderStatus = 4
                    }
                })



            }

        },

        //获取微信支付参数成功的回调函数
        payHandle: function (resObj) {
            console.log(resObj);
            // var result = JSON.parse(resObj);
            // console.log(result);
            var str = JSON.stringify(resObj.data.finalPackage);
            console.log(str);
            var that = this;
            //用返回参数 发起微信支付请求 
            plus.payment.request(wxChannel, str, function (data) {
                plus.ui.alert("支付成功!", function () {
                    that.$toast('购买成功')
                    that.getNum()
                    that.$forceUpdate()
                })
            }, function (error) {
                console.log(JSON.stringify(error));
                that.$toast("支付失败");
            });
        },
        //获取微信支付参数失败的回调函数
        payError: function (e) {
            console.log(JSON.stringify(e));
            this.$toast("获取参数失败，请重试");
        },

        dateFormat: function (d) {
            //当输入为结束日期时，执行如下代码
            d = new Date(d);
            d.setTime(d.getTime() + 3600 * 24 * 1000);
            var dateFlag = true;
            if (d < (new Date()).getTime()) {
                dateFlag = true;
            } else {
                dateFlag = false;
            }
            return dateFlag;
        }


    },
    created() {
        this.getData();
    },
    //计算属性
    computed: {

    },
    filters: {
        toFixed2: function (value) { //保留两位小数
            return (value * 1).toFixed(2);
        },
        getPriceFront: function (value) { //获取价格整数部分
            return (value * 1).toFixed(2).toString().split(".")[0];
        },
        getPriceEnd: function (value) { //获取价格小数部分
            return (value * 1).toFixed(2).toString().split(".")[1];
        }
    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.pageMain {
    background: #f2f2f2;
    height: 100vh;

    overflow-y: scroll;

}




.one-line {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 128px;
    margin-bottom: 24px;
    background-image: url(../../assets/order/confirm_address.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 24px 24px 24px 48px;
}

.address-icon {
    position: absolute;
    top: 40px;
    left: 24px;
}

.padding-box {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24px;
    margin-top: 24px;
}

.address-infor {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.address-content {
    font-size: 24px;
    color: #666;
}

.card {
    box-sizing: border-box;
    width: 100%;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 24px;
    padding: 24px;
}

.status-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 28px;
    color: #333;
}

.status-text {
    color: #666;
}

.product {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    padding: 24px 0 24px 200px;
    height: 224px;
}

.product-img {
    position: absolute;
    top: 24px;
    left: 0;
    display: block;
    width: 176px;
    height: 176px;
    border-radius: 16px;
}

.product-name {
    font-size: 28px;
    color: #333;
}

.product-spec {
    font-size: 24px;
    color: #999;
}

.price-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.price-num {
    font-size: 24px;
    color: #999;
}

.price-money {
    font-size: 24px;
    font-weight: bold;
    color: #FF3B14;
}

.price-money .big {
    font-size: 32px;
}

.widtn-control {
    width: 100%;
}

.order-item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    color: #333;
    padding-top: 24px;
}

.order-item-num {
    color: #666;
}

.order-item-box {
    border-top: 2px solid #F2F2F2;
    width: 100%;
}

.padding-top-0 {
    padding-top: 0;
}

.padding-bottom-12 {
    padding-bottom: 24px;
}

.footer {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 88px;
    padding: 0 24px;
    background: #FFF;
    border-top: 2px solid #F2F2F2;
}

.footer-btn {
    width: 156px;
    text-align: center;
    height: 68px;
    line-height: 68px;
    font-size: 28px;
    border-radius: 34px;
}

.default-btn {
    background: #DCDCDC;
    color: #666;
}

.color-btn {
    color: #FFF;
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    margin-left: 16px;
}


.mainCon {
    padding-bottom: 200px;
    position: relative;
    top: 90px;
}
</style>